<template>
    <div class="newsDetail">
        <pub-head isBorder="true"></pub-head>

        <!-- 头部 -->
        <div class="head ali-c flex">
            <router-link :to="'/'">首页 ></router-link>
            <router-link :to="'/newsList'">&nbsp;建筑资讯 ></router-link>
            <span class="blue-c">&nbsp;详情</span>
        </div>
        

        <!-- 详情 -->
        <div class="detail-box flexv">
            <h3 class="detail-box-head">{{info.title}}</h3>
            <p class="detail-box-time tc">发布时间：{{timestampToTime(info.add_time)}}</p>
            <div class="detail-box-txt" v-html="info.info"></div>
        </div>

        <div class="detail-btns flexv">
            <div class="detail-btn flex jus-b" @click="prev(prevs ? prevs.id : '')">上一篇：<span class="oneline" :class="{'none': !prevs}">{{prevs ? prevs.title : '没有了'}}</span></div>
            <div class="detail-btn flex jus-b" @click="next(nexts ? nexts.id : '')">下一篇：<span class="oneline" :class="{'none': !nexts}">{{nexts ? nexts.title : '没有了'}}</span></div>
        </div>

        <div class="pub-foot-seat"></div>


        <pub-foot index="true"></pub-foot>
    </div>
</template>
<script>
import Vue from 'vue';
import { mapState } from 'vuex';
import { Toast, List } from 'vant';
import pubHead from '@/components/head';
import pubFoot from '@/components/foot';

Vue.use(Toast).use(List)
export default {
    data(){
        return{
            info: [], // 详情
            prevs: [], // 上一篇
            nexts: [], // 下一篇
        }
    },
    created(){
        this.getData(this.$route.params.id)
    },
    computed: {
        ...mapState(['user'])
    },
    components: {
        pubHead,
        pubFoot
    },
    methods: {
        getData(id){
            Toast.loading('请稍后...')
            this.axios.get('http://jxjq.0791jr.com/index.php?m=App&c=Index&a=detail', {
                params:{
                    uid: this.$store.state.user.uid,
                    cate_id: '59',
                    article_id: id
                }
            }).then(res => {
                if(res.data.code == 200){
                    const data = res.data.data
                    this.info = data.detail
                    this.prevs = data.Last
                    this.nexts = data.Next
                    Toast.clear();
                }else {
                    Toast({
                        duration: 1800,
                        message: res.data.msg
                    })
                }
            })
        },
        // 上一篇
        prev(id){
            if(!id){
                Toast({
                    duration: 1800,
                    message: '已经是第一篇了T_T'
                })
                return
            }
            this.getData(id);
        },
        // 下一篇
        next(id){
            if(!id){
                Toast({
                    duration: 1800,
                    message: '已经是最后一篇了T_T'
                })
                return
            }
            this.getData(id);
        },
        // 时间转换
        timestampToTime(timestamp) {
            var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
            // var D = date.getDate() + '- ';
            // var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
            // var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
            // var s = (date.getSeconds() <10 ? '0' + date.getSeconds() : date.getSeconds());
            return Y+M+D;
            // return Y+M+D+h+m+s;
        },
    }
}
</script>
<style lang="less" scoped>
.newsDetail{
    min-height: 100vh;
    background-color: #f5f5f5;
    .head {
        height: 0.8rem;
        padding: 0 0.24rem;
        font-size: 0.28rem;
        line-height: 120%;
        span,a {
            color: #999;
            font-weight: bold;
        }
    }
    // 详情
    .detail-box {
        padding: 0.24rem;
        background-color: #fff;
        .detail-box-head{
            font-size: 0.34rem;
            font-weight: bold;
            line-height: 150%;
            color: #333;
        }
        .detail-box-time{
            width: 100%;
            height: 0.46rem;
            margin-top: 0.2rem;
            border-top: 1px dashed #d9d9d9;
            border-bottom: 1px dashed #d9d9d9;
            font-size: 0.24rem;
            line-height: 0.46rem;
            color: #9e9e9e;
        }
        .detail-box-txt{
            margin-top: 0.24rem;
            font-size: 0.28rem;
            color: #333;
        }
    }
    .detail-btns{
        margin: 0.2rem 0;
        padding: 0.24rem;
        background-color: #fff;
        .detail-btn{
            font-size: 0.26rem;
            font-weight: bold;
            .oneline{
                width: 5.8rem;
                font-weight: normal;
            }
            .none{
                color: #fd4c4d;
            }
        }
    }
}
</style>
